<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { addUserHandler, updateUserHandler } from '../../api/user.js'
import { ElMessage } from 'element-plus'

const data = reactive({
    userForm: {
        username: "",
        qq: "",
        address: ""
    }
})

const props = defineProps({
    // 判断当前是创建还是更新
    method: {
        type: String,
        default: "Create"
    },
    userForm: {
        type: Object
    }
})
// const loading = ref(false)
const userFormRef = ref()
const { userForm } = toRefs(data)
const clean = () => { // 清空表单
    userFormRef.value.resetFields()
}

const rules = reactive({
    username: [
        {required: true, message: "请输入姓名", trigger: 'blur'},
    ],
    qq: [
        {required: true, message: "请输入qq号", trigger: 'blur'},
    ],
})

const emits = defineEmits(["rollback"])


const submit = () => { // 调用创建用户接口
    userFormRef.value.validate((valid) => {
        if (valid) {
            // loading.value = true
            if (props.method == "Create") {
                addUserHandler(data.userForm).then((response) => {
                // console.log(response)
                ElMessage({
                    message: response.data.message,
                    type: "success"
                })
                // loading.value = false
                // emits('rollback') //回调
                // userFormRef.value.resetFields()
                })
            }else {
                updateUserHandler(data.userForm).then((response) => {
                // console.log(response)
                ElMessage({
                    message: response.data.message,
                    type: "success"
                })
                // loading.value = false
                emits('rollback') //回调
                // userFormRef.value.resetFields()
                })
            }
        }else {
            ElMessage({
                message: "请完善表单内容",
                type: "warning"
            })
        }
    })
}
onMounted(() => {
    data.userForm = JSON.parse(JSON.stringify(props.userForm))// 深拷贝
})
</script>

<template>
    <el-form :rules="rules" ref="userFormRef" :model="userForm">
      <el-form-item prop="username" class="form-item" label="姓名" :label-width="64">
        <el-input v-model="userForm.username" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="qq" class="form-item" label="QQ" :label-width="64">
        <el-input v-model="userForm.qq" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="address" class="form-item" label="地址" :label-width="64">
        <el-input v-model="userForm.address" autocomplete="off" />
      </el-form-item>
      <span class="span-button" style="display: block; margin-top: 30px auto;">
        <el-button @click="clean()">清空</el-button>
        <el-button type="primary" @click="submit()">{{ props.method == "Create"? "添加用户": "更新用户" }}</el-button>
      </span>
    </el-form>
</template>

<style scoped>
.form-item {
    width: 480px;
    margin: 20px auto;
}

</style>
